<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"> </script>
    <script src="/js/vue.min.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div id="myApp">
        <label>用户名:</label>
        <input type="text" v-model="params.userName" placeholder="请输入查询条件">
        <button type="button" class="btn btn-info" @click="queryData">查询</button>
       <table class="table table-bordered">
            <thead>
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="x in list">
                    <td>{{x.userId}}</td>
                    <td>{{x.userName}}</td>
                    <td>{{x.password}}</td>
                    <td>
                        <button type="button" class="btn btn-danger" @click="updatePage(x)">修改</button>
                        <button type="button" class="btn btn-danger" @click="del(x)">删除</button>
                    </td>
                </tr>

            </tbody>
       </table>

    </div>

</body>
<script>
     new Vue({
         el:"#myApp",
         data:{
             list:[],//定义一个接受服务端传来的数据
             params:{
                 userName:"",
             }
         },
         mounted(){//生命周期函数
             this.queryData();
         },
         methods:{
              del(x){//删除
                  //创建一个确认框
                  const is = confirm("你确定要删除吗?");
                  console.log(is);
                  if(is==true){
                      const self = this;
                      $.ajax({
                          url:"/user/del",
                          data:{"userId":x.userId},
                          success:function (rs) {
                             if(rs.code==200){
                                 alert(rs.msg);
                                 //数据刷新
                                 self.queryData();
                             }else{
                                 alert(rs.msg);
                             }
                          }
                      })
                  }
              },
              updatePage(x){
                  console.log(x);
                  //本地存储存选中行的数据
                  //JSON.stringify() 把js对象转换成字符串
                  localStorage.setItem("user",JSON.stringify(x));
                  //跳转到修改页面
                  window.location.href="/userInfoUpdate.html";
              },
              queryData(){//查询
                  //把vue对象赋值给一个变量self
                  const self = this;
                  $.ajax({
                      url:"/user/list",
                      data:this.params,
                      success:function (rs) {
                            console.log(rs);
                            if(rs.code==200){
                                //查询到的数据赋值给list
                               self.list = rs.data;
                            }else{
                                alert(rs.msg);
                                //清空数据
                                self.list =[];
                            }
                      }
                  })
              }
         }
     })
</script>
</html>
